<script setup>
import { storeToRefs } from "pinia";
import { reactive } from "vue";
import { useAuthStore } from "@/stores/auth";
const { authenticate } = useAuthStore();
const { errors } = storeToRefs(useAuthStore());
const formData = reactive({
  username: "",
  email: "",
  password: "",
  password_confirmation: "",
});
const register = async () => {
  authenticate("register", formData);
};
</script>

<template>
  <main>
    <h1 class="title">注册</h1>
    <form @submit.prevent="register" class="w-1/2 mx-auto space-y-6">
      <div>
        <input type="text" v-model="formData.name" placeholder="用户名" />
        <p v-if="errors.name" class="error">{{ errors.name[0] }}</p>
      </div>
      <div>
        <input type="text" v-model="formData.email" placeholder="邮箱" />
        <p v-if="errors.email" class="error">{{ errors.email[0] }}</p>
      </div>
      <div>
        <input type="text" v-model="formData.password" placeholder="密码" />
        <p v-if="errors.password" class="error">{{ errors.password[0] }}</p>
      </div>
      <div>
        <input
          type="text"
          v-model="formData.password_confirmation"
          placeholder="确认密码"
        />
      </div>

      <button class="primary-btn">注册</button>
    </form>
  </main>
</template>
